<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Image Stream</title>
</head>
<body>
    <h1>WebSocket Image Stream</h1>
    <img id="video-frame" alt="Video Stream">

    <script>
        const END_MESSAGE = 'END';
        const socket = new WebSocket('ws://192.168.3.22:7799');
        const imgElement = document.getElementById('video-frame');
        let buffer = '';
        console.log(socket,"socket")
        socket.binaryType = 'arraybuffer';

        socket.onmessage = function(event) {
            const data = new Uint8Array(event.data);
            buffer += String.fromCharCode.apply(null, data);

            // Check for end message
            const endIndex = buffer.indexOf(END_MESSAGE);
            if (endIndex !== -1) {
                const imageData = buffer.substring(0, endIndex);
                const imageBlob = new Blob([new Uint8Array(imageData.split('').map(c => c.charCodeAt(0)))], { type: 'image/jpeg' });

                // Create URL for the image blob
                const imageUrl = URL.createObjectURL(imageBlob);

                // Set the image URL to the img element
                imgElement.src = imageUrl;

                // Clear buffer
                buffer = buffer.substring(endIndex + END_MESSAGE.length);
            }
        };

        socket.onopen = function() {
            console.log('WebSocket connection opened');
        };

        socket.onclose = function() {
            console.log('WebSocket connection closed');
        };

        socket.onerror = function(error) {
            console.error('WebSocket error:', error);
        };
    </script>
</body>
</html>